<template>
    <div class="delivery">
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
            <div class="mask">
            </div>
        </div>
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>{{judgement.title}}</p>
            </div>
        </div>
        <div class="body">
            <ul>
                <li>
                    <span class="left">退货单号：</span>
                    <span class="right">{{returnId}}</span>
                </li>
                <li>
                    <span class="left">订单号：</span>
                    <span class="right">{{detail.orderId}}</span>
                </li>
                <li>
                    <span class="left">退货单类型：</span>
                    <span class="right" v-if="detail.returnTypeId == 'CUSTOMER_RETURN'">销售订单退货单</span>
                    <span class="right" v-else>采购订单退货单</span>
                </li>
                <li>
                    <span class="left">退货单状态：</span>
                    <span class="right" >{{detail.statusName}}</span>
                </li>
                <li>
                    <span class="left">创建时间：</span>
                    <span class="right">{{detail.createdStamp}}</span>
                    
                </li>
            </ul>
        </div>
        <div class="height">
            <div class="detail">
                <ul v-for="item in product_list" :key="item.id">
                    <li>
                        <span class="left">商品编码：</span>
                        <span class="right">{{item.productCode}}</span>
                    </li>
                    <li v-show="item.productName.length < 19">
                        <span class="left">商品名称：</span>
                        <span class="right">{{item.productName |format_str}}</span>
                    </li>
                    <li v-show="item.productName.length >= 19">
                        <span class="left">商品名称：</span>
                        <p class="right_">{{item.productName | format_str }}</p>
                    </li>
                    <li>
                        <span class="left">单&ensp;&ensp;&ensp;&ensp;位：</span>
                        <span class="right">{{item.unit}}</span>
                    </li>
                    <li>
                        <span class="left">订单数量：</span>
                        <span class="right"> {{item.quantity}}</span>
                    </li>
                    <li>
                        <span class="left">退货数量：</span>
                        <span class="right"> {{item.returnQuantity}}</span>
                    </li>
                    <li>
                        <span class="left">换货数量：</span>
                        <span class="right" v-if="item.changeQuantity"> {{item.changeQuantity}}</span>
                        <span class="right" v-else></span>
                    </li>
                </ul>
            </div>
        </div>

        <i v-show="judgement.confirmShow">
        <!--
          <div class="select">
            <p class="over">不取回理由</p>
            <div class="selectIput">
              <select v-model="reason">
                  <option value="不取回理由1">不取回理由1</option>
                  <option value="不取回理由2">不取回理由2</option>
                  <option value="不取回理由3">不取回理由3</option>
                  <option value="不取回理由4">不取回理由4</option>
              </select>
            </div>
          </div>
        -->
          
          <div class="btnContainer " >
              <button type="submit " class="SubmitBtn " v-on:click="submit('ACCEPT')">确认</button>
              <!--<button type="submit " class="SubmitBtn " v-on:click="submit('ABANDON')">不取回</button>-->
          </div>
        </i>

        <i v-show="judgement.takeBackShow">
           <div class="select">
             <p class="over">拒收理由</p>
          <div class="selectIput">
              <select  v-model="reason">
                  <option value="拒收理由1">拒收理由1</option>
                  <option value="拒收理由2">拒收理由2</option>
                  <option value="拒收理由3">拒收理由3</option>
                  <option value="拒收理由4">拒收理由4</option>
              </select>
          </div>
          </div>
          <div class="btnContainer " >
              <button type="submit " class="SubmitBtn " v-on:click="submit('RECEIVE')">接收</button>
              <button type="submit " class="SubmitBtn " v-on:click="submit('REJECT')">拒收</button>
          </div>
        </i>
    </div>
</template>
<script>
import smalloading from "./../../loading/smalloading";
export default {
  name: "returnGoodsList",
  data() {
    return {
      isShow: false,
      show: false,
      amount: "",
      detail: {},
      product_list: [],
      sign_img: "",
      isModal: true,
      judgement : {title : '', confirmShow : false , takeBackShow : false },
      reason : '',
      returnId : ''
    };
  },
  components: {
    smalloading
  },
  methods: {
    back: function() {
      // this.$router.push({ path: "/ReturnNav" });
      this.$router.push({ path: "/ReturnMenu" });
    },
    load_list: function() {
      //returnId : C120129
      this.isModal = true;
      this.$http.post("api/motor/getReturnInfo", { returnId: sessionStorage.getItem("returnId"),storcode: localStorage.getItem("storcode")}).then(res => {
            this.isModal = false;
            let result = res.data;
            console.log(res.data);
            if (res.data.code == 101) {
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (result.code == 102) {
              let this_ = this;
              this_.$layer.alert(result.msg, function() {
                this_.$layer.close(this.id);
                this_.$router.push({ path: "/ReturnMenu" });
              });
            }
            if (result.code == 100) {
              this.returnId = sessionStorage.getItem('returnId') ;
              this.detail = result.data.returnList[0].baseInfo;
              this.product_list = result.data.returnList[0].productInfo;
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    },
    submit (action) {
      if(action == 'REJECT' && this.reason == ''){
        this.$layer.alert("请选择拒收理由");
        return ;
      }
      if(action == 'ABANDON' && this.reason == ''){
        this.$layer.alert("请选择不取回理由");
        return ;
      }
      let this_ = this ;
      this_.$layer.confirm("是否确认？", function() {
          this_.$layer.close(this.id);
          this_.updateReturn(action);
      });
    },
    updateReturn(action) {
      this.$http.post("api/motor/submitReturnInfo", {
          returnId: sessionStorage.getItem("returnId"),
          action: action,
          reason: this.reason,
          productInfo: this.product_list }).then(res => {
          let result = res.data;
          this.isModal = false;
          if (result.code == 101) {
            this.$layer.alert("当前用户已在其他设备登录");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
            return;
          }
          if (result.code == 102) {
            let this_ = this ;
            this_.$layer.alert(result.msg , function () {
              this_.$layer.close(this.id) ;
              this_.$router.push({ path: "/ReturnMenu" });
            });
          }
          if (result.code == 100) {
            let this_ = this;
            this_.$layer.alert("操作成功", function() {
              this_.$layer.close(this.id);
              this_.$router.push({ path: "/ReturnNav" });
            });
          }
        });
    }
  },
  created: function() {
    let inventoryStatusId = sessionStorage.getItem('inventoryStatusId');
    if(inventoryStatusId == 'RET_INV_SUBMITTED'){
      // this.judgement.title = '待确认销售退货列表';
      this.judgement.title = '退货详情(待确认)';
      this.judgement.confirmShow = true ;
    }
    if(inventoryStatusId == 'RET_INV_PENDING'){
      this.judgement.title = '退货详情(待取回)'
      this.judgement.takeBackShow = true ;
    }
    this.load_list();
  }
};
</script>
<style lang="css" scoped>
.over {
  font-size: 1.3rem;
  margin-top: 1rem;
}
.select {
  display: -webkit-box;
  margin: 3rem;
}
.selectIput {
  width: 200px;
  height: 40px;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  position: relative;
  margin-left: 2rem;
}
select {
  border: none;
  outline: none;
  width: 100%;
  height: 40px;
  line-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 60px;
  font-size: 1.4rem;
}
.selectIput:after {
  content: "";
  width: 14px;
  height: 8px;
  background: url("./../../../../static/img/下拉.png") no-repeat center;
  position: absolute;
  right: 20px;
  top: 45%;
  pointer-events: none;
}
.textarea {
  background: #fff;
  border: 1px solid #ddd;
  width: 90%;
  margin: 1.6rem;
  border-radius: 7px;
  padding: 1rem;
}
.right_ {
  width: 200px;
  word-break: break-all;
  /* float: right; */
  display: inline-flex !important;
}

.margin {
  margin: 2rem 1rem 1rem 2rem;
  font-size: 1.6rem;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.check_num {
  width: 80%;
  background-color: #fff;
  position: fixed;
  z-index: 8;
  margin-left: 10%;
  top: 30%;
  /* padding: 3% 6% 3% 11%; */
  border-radius: 0.5rem;
}

.check_num label {
  font-size: 15px;
}

.check_num input {
  width: 90%;
  font-size: 15px;
  height: 3rem;
  padding-left: 4%;
  margin-top: 5px;
  border: 1px solid #d3dce6;
  border-radius: 6px;
  background: #f9fafc;
}

.hint {
  line-height: 3rem;
  height: 3rem;
  background: rgba(190, 190, 190, 0.21);
  padding-left: 7%;
}

.check_num span {
  font-size: 15px;
  text-align: -webkit-center;
  display: -webkit-box;
}

.affirm {
  display: inline-block;
  background: #195caa;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 3% 6% 3% 14%;
  outline: none;
  font-size: 1.5rem;
}

.cancel {
  display: inline-block;
  background: #fff;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: 1px solid #668292;
  color: #195caa;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 17px;
  outline: none;
  font-size: 1.5rem;
}

.loadiv {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  /* background-color: gray; */
  /* opacity: 0.1; */
}

.loading {
  margin: 60% auto;
  z-index: 88;
}

.mar {
  width: 65%;
}

.body {
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  background: #fff;
}

.body ul {
  margin-top: 5rem;
}

.body li:last-child {
  border: none;
}

.body li {
  font-size: 1.3rem;
  color: gray;
  max-height: 5rem;
  line-height: 3rem;
  border-bottom: 1px solid #e5e3e3;
}

.body .left {
  padding: 0 1rem;
  display: inline-block;
  /* width: 65%; */
}

.body .right {
  float: right;
  margin-right: 5px;
}

.btnContainer {
  padding-bottom: 3rem;
  width: 100%;

  text-align: center;
  padding: 0.83rem 0;
}

.btnContainer .SubmitBtn {
  background: #668292;
  width: 35%;
  height: 3.2rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-size: 15px;

  padding: 0.5rem 0;
  outline: none;
  margin: 0 1rem;
}

.detail {
  margin: 1rem 0;
  background: #fff;
}

.detail ul {
  margin-top: 1rem;
  box-shadow: 0px 0px 15px #999;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  min-height: 2rem;
  line-height: 2rem;
}

.detail .left {
  padding: 0 1.8rem;
  display: inline-block;
  /* width: 65%; */
}

.detail .right {
  float: right;
  margin-right: 15px;
}

.height {
  /* height: 19rem; */
  /* background: #fff; */
  overflow: scroll;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  width: 41%;
  padding-left: 1.5rem;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  width: 100%;
  position: fixed;
  z-index: 33;
  line-height: 4rem;
  display: -webkit-box;
  background: #668292;
  height: 4rem;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
  margin-left: -20px;
}
</style>